<template>
	<view class="">
		<bg-image />
		<view class="content ">
			<image class="top-logo" src="../../static/home/logo.png" mode=""></image>
			<!-- 选项框 -->
			<view class="select-v animate__animated animate__bounceIn">
				<view class="title">
					{{$t("popu.NumberOfDiners")}}
				</view>
				<!-- 人数 -->
				<view class="FunctionPoint_c">
					<view class="FunctionPoint_Item" :class="currentIndex == index? 'FunctionPoint_Item_y':''"
						v-for="(item , index) in 10" :key="index" @click="itemFun(index)">
						{{index +1}}
					</view>
				</view>
				<!-- 输入 -->
				<view class="numberINdex">
					<input class="numberINdex_inpt" type="number" placeholder="手动输入人数" />
					<view class="">
						<u-icon name="arrow-right" color="#fff"></u-icon>
					</view>
				</view>
				<!-- 分割 -->
				<view class="" style="margin-top: ;">
					<u-divider text=""></u-divider>
				</view>

				<button class="btn-primary but-c" @click="setUpFun">
					{{$t("index.StartOrdering")}}
				</button>

				<!-- <text class="skip" @click="skipFun">{{$t("NumberOfPeople.skip")}}</text> -->
			</view>
		</view>
	</view>

</template>

<script>
	import {
		chosePersonNum
	} from '@/common/config/api.js'
	export default {
		data() {
			return {
				currentIndex: 0,
			}
		},
		computed: {
			dinersNumber() {
				if (this.currentIndex < 10) {
					return this.currentIndex + 1
				} else {
					return this.currentIndex
				}
			}
		},
		methods: {
			itemFun(e) {
				this.currentIndex = e
			},
			setUpFun() {
				console.log('xxxx', this.dinersNumber)
				chosePersonNum({
					id: this.getDeskId(),
					personNum: this.dinersNumber
				}).then((res) => {
					uni.setStorageSync('dinersNumber', this.dinersNumber)
					this.$u.route('/pages/home/home');
				}).catch(() => {

				})
			},
			skipFun() {
				// this.$u.route('/pages/home/TableNumber');
				this.$u.route('/pages/home/home');
				uni.setStorageSync('dinersNumber', '-')
			}
		}
	}
</script>

<style lang="scss" scoped>
	page {
		background-image: url('~@/static/pageImg.png') repeat fixed center;
		background-size: 100%;
	}

	.content {
		height: 100vh;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		position: relative;

		.top-logo {
			width: 84px;
			height: 32px;
			position: absolute;
			top: 12px;
			left: 30px;
		}

		.select-v {
			width: 430px;
			height: 447px;
			background: #161618;
			border-radius: 10px 10px 10px 10px;
			// opacity: 0.8;
			background: rgba(1, 22, 22, 0.7);
			padding: 24px 20px;
			display: flex;
			// justify-content: center;
			flex-direction: column;

			.title {
				// width: 100%;
				font-size: 20px;
				opacity: 1;
				margin: 0 auto;
				color: $uni-text-color;
			}

		}
	}

	.FunctionPoint_c {
		// margin-top: 24upx;
		width: 100%;
		display: flex;
		flex-wrap: wrap;
		justify-content: flex-start;
	}

	.FunctionPoint_Item {
		width: 15%;
		height: 70px;
		/* padding: 32upx 0; */
		/* height: 152upx; */
		margin: 0 10px;
		margin-top: 24px;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		color: $uni-text-color;
		background-color: rgba(44, 44, 47, 0.8);
		border-radius: 10px;
		font-size: 24px;
		/* padding: 25upx 0; */
	}

	.FunctionPoint_Item_y {
		background-color: $uni-text-color-zbt-f;
	}

	.numberINdex {
		margin-top: 24px;
		background-color: rgba(44, 44, 47, 0.8);
		color: $uni-text-color;
		font-size: 24px;
		padding: 16px;
		border-radius: 10px;
		display: flex;
		flex-direction: row;
		align-items: center;

		.numberINdex_inpt {
			flex: 1;
		}
	}

	.but-c {
		width: 172px;
		height: 50px;
		margin: 0 auto;
		margin-top: 24px;
	}

	.skip {
		margin: 0 auto;
		margin-top: 24px;
		color: rgba(255, 255, 255, 0.7);
	}
</style>